<template>
  <div class="play-contrainer">
    <h2 style="text-align: center;">{{this.$route.query.name}}</h2>
    <div
      style="
        height: 400px;
        width: 800px;
        position: relative;
        margin: 0px auto;
        background: #000;
      "
    >
      <video
        style="
        height: 400px;
        width: 800px;
        position
      "
      ref="vdo"
        controls
        autoplay
      >
        <source  type="video/mp4" />
      </video>
      <v-barrage :arr="arr" :isShow="isShow" :percent="80">
      </v-barrage>
    </div>
    <div class="barrage-control">
      <span style="margin-right: 15px">{{ buddle }}</span>
      <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#A4A4A4"
        @change="change"
      >
      </el-switch>
      <input
        type="text"
        v-model="sendContent"
        placeholder="输入弹幕内容"
        id="sendContent"
        @keyup.enter="sendBarrage"
        style="
        margin-left:15px
          width: 400px;
          display: inline-block;
          height: 30px;
          font-size: 16px;
        "
      />
      <el-button
        id="sendBarrageBtn"
        style="margin-left: 5px"
        @click="sendBarrage"
        type="primary"
      >
        发送
      </el-button>
    </div>
  </div>
</template>

<script>
import VBarrage from "../VBarrage/index.vue";
import { getVideoSrc,addHistory } from "../../api/video";
export default {
  name: "Play",
  components: {
    VBarrage,
  },
  data() {
    return {
      buddle: "弹幕已开启",
      value: true,
      videoSrc: undefined,
      arr: [],
      isPause: false,
      sendContent: null,
      isJs: false,
      direction: "default",
      isShow: true,
      flvPlayer: null,
      timeDisplay:undefined,
      id:undefined
    };
  },
  created() {
    this.id = this.$route.query.id;
  },
  mounted(){
    let video = document.querySelector('video');
    getVideoSrc(this.$route.query.sign).then((res) => {
      this.videoSrc = res.data.playUrl[0].playURL;
      this.$refs.vdo.src = this.videoSrc;
      this.$refs.vdo.currentTime = localStorage.getItem('u_id')?localStorage.getItem(this.id):0;
      let that = this;
      video.addEventListener("timeupdate",()=>{
        that.timeDisplay = video.currentTime;
      },false);
    });
     if(this.isShow){
      this.initTestData();
    }
  },
  beforeDestroy(){
    if(localStorage.getItem('u_id')){
      addHistory({userId:parseInt(localStorage.getItem('u_id')),videoId:parseInt(this.id)}).then(res=>{
    })
    localStorage.setItem(this.id,this.timeDisplay);
    }
  },
  methods: {
    change(e) {
      this.buddle = e ? "弹幕已开启" : "弹幕已关闭";
      this.runBarrage();
    },
    runBarrage() {
      this.isShow = !this.isShow;
      this.isShow ? this.initTestData() : (this.arr = []);
    },
    // 初始化模拟弹幕数据
    initTestData() {
      let arr = ["这是一条有弹幕", "今天去打LOL", "可以吗？", "一起嗨！！！"];
      for (let i = 0; i < 6; i++) {
        for (let index = 0; index < 100; index++) {
          this.arr.push({
            direction: "default",
            content: arr[parseInt(Math.random() * arr.length)],
          });
        }
      }
    },
    // 发送弹幕
    sendBarrage() {
      if (
        this.sendContent != "" &&
        this.sendContent != null
      ) {
        this.arr.unshift({
          content: this.sendContent,
          direction: this.direction,
          isSelf: true,
          style: {
            color: "red",
            fontSize: "25px",
          },
          isJs: this.isJs,
        });
        
      }
      if (this.isShow) {
        this.$message.success("发送成功！");
        this.sendContent = null;
      } else {
        this.$message.info("开启弹幕，效果更加哦");
        this.sendContent = null;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.play-contrainer{
  height: calc(100vh - 2px);
  border: 1px solid transparent;
background-color: rgba(rgb(240, 235, 235),0.5);
  .barrage-control {
  text-align: center;
  margin: 10px 0px;
}
}

</style>